<template>
	<view class="box">
		<uNavbar title="实名认证" bgColor="transparent"></uNavbar>
		<view class="title">
			请输入您的实名信息
		</view>
		<view class="main_item">
			<view class="main_item_title">
				真实姓名
			</view>
			<input type="text" :value="name" placeholder="输入本人真实姓名" @input="getname" />
		</view>
		<view class="main_item">
			<view class="main_item_title">
				身份证号
			</view>
			<input type="text" maxlength="18" :value="idcard" placeholder="输入本人真实身份证号" @input="getidcard" />

		</view>
		<view class="main_item">
			<view class="main_item_title">
				手机号
			</view>
			<input type="number" :value="phone" maxlength="11" placeholder="请输入本人实名下的手机号" @input="getphone" />
		</view>
		<view class="btn" @click="submit">
			确定
		</view>
	</view>
</template>
<script>
	import {
		submitrealname
	} from "../../api/setting.js"
	export default {
		data() {
			return {
				name: "",
				idcard: "",
				phone: ""
			}
		},
		computed: {
			isPhoneNumberValid() {
				const phoneNumberRegex = /^1[3-9]\d{9}$/;
				return phoneNumberRegex.test(this.phone);
			},
			isIdCardNumberValid() {
				const idCardNumberRegex = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
				return idCardNumberRegex.test(this.idcard);
			},
		},
		methods: {
			getname(e) {
				this.name = e.detail.value
			},
			getidcard(e) {
				this.idcard = e.detail.value
			},
			getphone(e) {
				this.phone = e.detail.value
			},
			submit() {
				if (!this.name) {
					uni.$u.toast("姓名不能为空");
				} else if (!this.idcard) {
					uni.$u.toast("身份证号不能为空");
				} else if (!this.isIdCardNumberValid) {
					uni.$u.toast("身份证号格式不对");
				} else if (!this.isPhoneNumberValid) {
					uni.$u.toast("手机号格式不对");
				} else{
					submitrealname({
						real_name: this.name,
						id_num: this.idcard,
						phone:this.phone
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
						console.log(res)
						uni.$u.toast(res.msg);
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #E0DDDA;
	}

	.title {
		width: 700rpx;
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-left: 50rpx;
	}

	.main_item {
		width: 750rpx;

		.main_item_title {
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-left: 50rpx;
			margin-top: 70rpx;
		}

		>input {
			margin: 0 auto;
			margin-top: 40rpx;
			width: 638rpx;
			height: 50rpx;
			font-weight: 300;
			font-size: 30rpx;
			color: #fff;
			border-bottom: 2rpx solid rgba(255, 44, 223, 0.5);
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	/deep/ .uni-input-placeholder {
		color: #A6A5AF !important;
	}
</style>